<template>
  <!-- 我的页面 -->
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!-- <el-tab-pane label="我发布的" name="first"> </el-tab-pane>
      <el-tab-pane label="美食" name="second"> </el-tab-pane> 
      新加：发布者对发布信息的删除-->
      <el-tab-pane label="我发布的" name="first"></el-tab-pane>
      <el-tab-pane label="我接收的消息处理" name="second"></el-tab-pane>
    </el-tabs>
    <div style="height: 100%">
      <div class="search" style="display: flex; margin-left: 10px">
        <el-input
          v-model="search"
          placeholder="请输入搜索内容"
          style="width: 200px"
        ></el-input
        ><el-button
          icon="el-icon-search"
          circle
          style="margin-left: 20px"
          @click="searchData(search)"
        ></el-button>
        <el-button
          icon="el-icon-plus"
          circle
          style="margin-left: 20px; color: #9bc9d3"
          @click="addInfo = true"
          v-if="activeName == 'first'  && userAudit == 'true'"
        ></el-button>
      </div>
      <div
        class="content"
        v-loading="tableData.length <= 0"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <el-row>
          <el-col
            :span="4"
            v-for="(item, index) in tableData"
            :key="index"
            style="padding: 10px"
          >
            <el-card :body-style="{ padding: '5px' }" shadow="hover">
              <img :src="item.barterImg" class="image" height="150px" />
              <div style="padding: 14px">
                <el-tag
                  v-if="item.barterType == '寻物'"
                  color="#fc3f26"
                  effect="dark"
                  style="border: none; height: 28px"
                >
                  寻物
                </el-tag>
                <el-tag
                  v-else-if="item.barterType == '出物'"
                  color="#67c23a"
                  effect="dark"
                  style="border: none; height: 28px"
                >
                  出物
                </el-tag>
                <el-tag
                  v-else-if="item.barterType == '留言板'"
                  type="warning"
                  effect="dark"
                  style="border: none; height: 28px"
                >
                  留言
                </el-tag>
                <el-tag
                  v-else-if="item.barterType == '代取'"
                  effect="dark"
                  style="border: none; height: 28px"
                >
                  代取
                </el-tag>
                <el-tag
                  v-else-if="item.barterType == 'food'"
                  effect="plain"
                  type="info"
                  style="border: none; height: 28px"
                >
                  <i class="el-icon-food"></i>
                </el-tag>
                <el-tag
                  v-else-if="item.barterType == 'camera'"
                  effect="plain"
                  type="info"
                  style="border: none; height: 28px"
                >
                  <i class="el-icon-camera"></i>
                </el-tag>
                <span> {{ item.barterTitle }} </span>
                <div class="bottom clearfix">
                  <template
                    v-if="
                      item.barterType == '寻物' ||
                      item.barterType == '代取' ||
                      item.barterType == '出物'
                    "
                  >
                    <span class="time" v-if="item.barterAudit == 0"
                      >信息状态：已处理</span
                    >
                    <span class="time" v-else-if="item.barterAudit == 1"
                      >信息状态：未处理</span
                    >
                    <span class="time" v-else-if="item.barterAudit == 2"
                      >信息状态：举报处理中</span
                    >
                  </template>
                  <template v-else-if="item.barterType == '留言板'">
                    <span class="time" v-if="item.barterAudit == 2"
                      >信息状态：举报处理中</span
                    >
                  </template>
                  <!-- <span class="time" v-else-if="item.barterType == 'food' || item.barterType == 'camera'"
                  >分享信息</span
                > -->
                  <textarea v-model="item.barterDesc" class="desc" style="">
                  </textarea>
                  <el-button
                    type="button"
                    class="button"
                    @click="del(item)"
                    style="
                      right: 150px;
                      left: 17px;
                      height: 28px;
                      color: #ff1010;
                    "
                    v-if="activeName == 'first' && item.barterAudit != 2"
                    >删除该信息</el-button
                  >
                  <el-button
                    type="text"
                    class="button"
                    @click="showDetail(item)"
                    v-if=" item.barterAudit != 2""
                    >修改信息</el-button
                  >
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <!-- 信息展示弹框 -->
        <el-dialog
          title="信息详情"
          :visible.sync="dialogFormVisible"
          center
          v-if="activeName == 'first'"
        >
          <el-form :model="form" ref="form" :rules="rules">
            <el-form-item
              label="物品图片"
              :label-width="formLabelWidth"
              v-if="form.img"
            >
              <div
                style="
                  position: relative;
                  width: 200px;
                  display: inline-block;
                  margin: 0 5px;
                "
                v-for="(item, index) in form.img"
              >
                <img
                  :src="item.barterImg || item.takeImg || item"
                  alt=""
                  height="200px"
                  width="200px"
                />
                <i
                  class="el-icon-delete"
                  style="position: absolute; right: 3px; top: 2px"
                  @click="delImg(index)"
                ></i>
              </div>
              <el-upload
                action=""
                list-type="picture-card"
                :auto-upload="false"
                :on-change="handleChange"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <!-- 图片预览 -->
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
              <!-- <img :src="addform.img" alt="" height="200px" width="200px" /> -->
            </el-form-item>
            <el-form-item label="物品名称" :label-width="formLabelWidth">
              <el-input v-model="form.title" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="物品描述" :label-width="formLabelWidth">
              <el-input v-model="form.desc" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
              label="标签"
              :label-width="formLabelWidth"
              v-if="
                form.tagType == 'success' ||
                form.tagType == 'danger' ||
                form.tagType == ''
              "
            >
              <el-tag
                :type="form.tagType"
                closable
                v-for="(tag, index) in form.tags"
                :key="index"
                @close="handleClose(tag)"
                style="margin-left: 10px"
                >{{ tag }}</el-tag
              >
              <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
              >
              </el-input>
              <el-tooltip
                class="item"
                effect="dark"
                content="标签尽可能清楚，以便查找"
                placement="top-start"
                v-else
              >
                <el-button
                  class="button-new-tag"
                  size="small"
                  @click="showInput"
                  >+ New Tag</el-button
                >
              </el-tooltip>
            </el-form-item>
            <el-form-item
              label="有效时间"
              :label-width="formLabelWidth"
              v-if="
                form.tagType == 'success' ||
                form.tagType == 'danger' ||
                form.tagType == ''
              "
            >
              <div class="block">
                <el-date-picker
                  v-model="form.validDate"
                  type="datetime"
                  placeholder="选择日期时间"
                  align="right"
                  format="yyyy-MM-dd HH:mm"
                  value-format="yyyy-MM-dd HH:mm"
                  style="width: 300px"
                >
                </el-date-picker>
              </div>
            </el-form-item>
            <el-form-item
              label="联系方式"
              :label-width="formLabelWidth"
              v-if="
                form.tagType == 'success' ||
                form.tagType == 'danger' ||
                form.tagType == ''
              "
            >
              <el-input v-model="form.contact" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
              label="留言"
              :label-width="formLabelWidth"
              v-if="form.tagType == '留言'"
            ></el-form-item>
            <el-form-item v-if="form.tagType == '留言'">
              <el-card class="el-card-d" shadow="always">
                <div class="infinite-list-wrapper" style="overflow: auto">
                  <el-timeline infinite-scroll-disabled="disabled">
                    <div
                      v-if="form.allmessages.length"
                      style="max-height: 300px; overflow: auto"
                    >
                      <el-timeline-item
                        v-for="(i, index) in form.allmessages"
                        :key="index"
                        :timestamp="i.createTime"
                        placement="top"
                      >
                        <el-card class="el-card-m" style="height: 60px">
                          <p
                            style="
                              word-break: keep-all;
                              white-space: nowrap;
                              overflow: hidden;
                              text-overflow: ellipsis;
                            "
                          >
                            {{ i.memberName }}：
                            {{ i.content }}
                          </p>
                        </el-card>
                      </el-timeline-item>
                    </div>
                    <div v-else>
                      <el-timeline-item placement="top">
                        <el-card class="el-card-m" style="height: 120px">
                          <h4>还没有留言内容</h4>
                        </el-card>
                      </el-timeline-item>
                    </div>
                  </el-timeline>
                </div>
              </el-card>
            </el-form-item>
            <el-form-item v-if="form.tagType == '留言'">
              <div style="text-align: right">
                <template>
                  <div class="el-card-messages">
                    <el-input
                      type="textarea"
                      :rows="4"
                      placeholder="输入留言"
                      maxlength="200"
                      v-model="message"
                    ></el-input>
                    <el-button
                      type="warning"
                      round
                      class="submit-message"
                      icon="el-icon-message"
                      @click="submitMessage"
                      style="margin-top: 4px"
                      >留言</el-button
                    >
                    <el-button
                      round
                      @click="message = ''"
                      style="margin-top: 4px"
                      >取 消</el-button
                    >
                  </div>
                </template>
              </div>
            </el-form-item>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <template>
              <el-button type="primary" @click="updateadd('form', form)"
                >保存</el-button
              >
            </template>
          </div>
        </el-dialog>

        <!-- 信息处理弹框 -->
        <el-dialog
          title="信息详情"
          :visible.sync="dialogFormVisible"
          center
          v-else
        >
          <!-- <template>
          <div
            style="
              top: 20px;
              left: 30px;
              position: absolute;
              width: 42px;
              height: 20px;
              text-align: center;
              background: #f56c6c;
              color: white;
            "
            @click="jubao(form)"
          >
            举报
          </div>
        </template> -->
          <el-form :model="form" ref="form" :rules="rules">
            <el-form-item
              label="物品图片"
              :label-width="formLabelWidth"
              v-if="form.img"
            >
              <div
                style="
                  position: relative;
                  width: 200px;
                  display: inline-block;
                  margin: 0 5px;
                "
                v-for="(item, index) in form.img"
              >
                <img
                  :src="item.barterImg || item.takeImg || item"
                  alt=""
                  height="200px"
                  width="200px"
                />
              </div>
            </el-form-item>
            <el-form-item label="物品名称" :label-width="formLabelWidth">
              <el-input
                v-model="form.title"
                autocomplete="off"
                :disabled="true"
              ></el-input>
            </el-form-item>
            <el-form-item label="物品描述" :label-width="formLabelWidth">
              <el-input
                v-model="form.desc"
                autocomplete="off"
                :disabled="true"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="标签"
              :label-width="formLabelWidth"
              v-if="
                form.tagType == 'success' ||
                form.tagType == 'danger' ||
                form.tagType == ''
              "
            >
              <el-tag
                :type="form.tagType"
                v-for="(tag, index) in form.tags"
                :key="index"
                style="margin-left: 10px"
                >{{ tag }}</el-tag
              >
            </el-form-item>
            <el-form-item
              label="有效时间"
              :label-width="formLabelWidth"
              v-if="
                form.tagType == 'success' ||
                form.tagType == 'danger' ||
                form.tagType == ''
              "
            >
              <el-input
                v-model="form.validDate"
                autocomplete="off"
                :disabled="true"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="联系方式"
              :label-width="formLabelWidth"
              v-if="
                form.tagType == 'success' ||
                form.tagType == 'danger' ||
                form.tagType == ''
              "
            >
              <el-input
                v-model="form.contact"
                autocomplete="off"
                :disabled="true"
              ></el-input>
            </el-form-item>
            <el-form-item label="留言内容" :label-width="formLabelWidth">
              <template v-for="(item, index) in form.leaveMessage">
                <!-- <span>{{item.leaveMessage--index}}</span> -->
                <el-input
                  v-model="item.leaveMessage"
                  autocomplete="off"
                  :disabled="true"
                ></el-input>
              </template>
            </el-form-item>
            <el-form-item label="回复" :label-width="formLabelWidth">
              <el-input
                v-model="form.authMessage"
                autocomplete="off"
                v-if="form.audit == 1 && form.InfoPublisher == userName"
              ></el-input>
              <el-input
                v-model="form.authMessage"
                autocomplete="off"
                :disabled="true"
                v-else
              ></el-input>
            </el-form-item>
          </el-form>
          <div
            slot="footer"
            class="dialog-footer"
            v-if="form.audit == 1 && form.InfoPublisher == userName"
          >
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <template>
              <el-button type="primary" @click="updateAudit(form)"
                >更改信息状态为已处理</el-button
              >
            </template>
          </div>
        </el-dialog>

        <!-- 信息添加弹框 -->
        <el-dialog
          title="添加信息"
          :visible.sync="addInfo"
          center
          @close="hidden"
        >
          <el-form :model="addform" ref="addForm" :rules="rules">
            <el-form-item label="物品图片" :label-width="formLabelWidth">
              <el-upload
                action=""
                list-type="picture-card"
                :auto-upload="false"
                :on-change="handleChange"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <!-- 图片预览 -->
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
            </el-form-item>
            <el-form-item label="事件属性" :label-width="formLabelWidth">
              <div>
                <el-radio
                  v-model="addform.tagType"
                  label="danger"
                  border
                  style="margin: 3px"
                  >寻物</el-radio
                >
                <el-radio
                  v-model="addform.tagType"
                  label="success"
                  border
                  style="margin: 3px"
                  >出物</el-radio
                >
                <el-radio
                  v-model="addform.tagType"
                  label=""
                  border
                  style="margin: 3px"
                  >代取</el-radio
                >
                <el-radio
                  v-model="addform.tagType"
                  label="camera"
                  border
                  style="margin: 3px"
                  >美景分享</el-radio
                >
                <el-radio
                  v-model="addform.tagType"
                  label="food"
                  border
                  style="margin: 3px"
                  >美食分享</el-radio
                >
                <el-radio
                  v-model="addform.tagType"
                  label="message"
                  border
                  style="margin: 3px"
                  >留言</el-radio
                >
              </div>
            </el-form-item>
            <el-form-item
              label="物品名称"
              :label-width="formLabelWidth"
              required
              prop="title"
            >
              <el-autocomplete
                v-model="addform.title"
                :fetch-suggestions="queryTitleSearch"
                placeholder="请输入物品名称"
                :trigger-on-focus="false"
                @select="handleSelect"
                @keyup.enter.native="addTag(addform.title)"
                @blur="addTag(addform.title)"
                props="title"
              ></el-autocomplete>
            </el-form-item>
            <el-form-item
              label="地点"
              :label-width="formLabelWidth"
              v-if="
                addform.tagType == 'success' ||
                addform.tagType == 'danger' ||
                addform.tagType == ''
              "
            >
              <el-autocomplete
                v-model="addform.place"
                :fetch-suggestions="queryPlaceSearch"
                placeholder="请输入地点"
                :trigger-on-focus="false"
                @select="handleSelect"
                @keyup.enter.native="addTag(addform.place)"
                @blur="addTag(addform.place)"
              ></el-autocomplete>
            </el-form-item>
            <el-form-item
              label="物品描述"
              :label-width="formLabelWidth"
              required
              props="title"
            >
              <el-input
                type="textarea"
                :rows="2"
                placeholder="本人昨天在图书馆附件遗失一张饭卡，请见到的同学及时联系我，非常感谢！"
                v-model="addform.desc"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              label="标签"
              :label-width="formLabelWidth"
              v-if="
                addform.tagType == 'success' ||
                addform.tagType == 'danger' ||
                addform.tagType == ''
              "
            >
              <el-tag
                :key="tag"
                v-for="tag in dynamicTags"
                closable
                :disable-transitions="false"
                :type="addform.tagType"
                @close="handleClose(tag)"
                style="margin-right: 5px"
              >
                {{ tag }}
              </el-tag>
              <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
              >
              </el-input>
              <el-tooltip
                class="item"
                effect="dark"
                content="标签尽可能清楚，以便查找"
                placement="top-start"
                v-else
              >
                <el-button
                  class="button-new-tag"
                  size="small"
                  @click="showInput"
                  >+ New Tag</el-button
                >
              </el-tooltip>
            </el-form-item>
            <el-form-item
              label="有效时间"
              :label-width="formLabelWidth"
              required
              v-if="
                addform.tagType == 'success' ||
                addform.tagType == 'danger' ||
                addform.tagType == ''
              "
              props="title"
            >
              <div class="block">
                <el-date-picker
                  v-model="addform.validDate"
                  type="datetime"
                  placeholder="选择日期时间"
                  align="right"
                  format="yyyy-MM-dd HH:mm"
                  value-format="yyyy-MM-dd HH:mm"
                  style="width: 300px"
                >
                </el-date-picker>
              </div>
            </el-form-item>
            <el-form-item
              label="联系方式"
              :label-width="formLabelWidth"
              v-if="
                addform.tagType == 'success' ||
                addform.tagType == 'danger' ||
                addform.tagType == ''
              "
            >
              <el-input
                v-model="addform.contact"
                autocomplete="off"
                placeholder="请输入联系方式"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="addInfo = false">取 消</el-button>
            <el-button type="primary" @click="add('addForm', addform)"
              >确 定</el-button
            >
          </div>
        </el-dialog>
      </div>
      <!-- //分页动态显示 -->
      <div class="pages">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[12]"
          :page-size="12"
          layout="total, prev, pager, next, jumper"
          :total="totalData"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      activeName: "first",
      // 简单留言
      message: "",
      search: "",
      currentPage: 1,
      nowData: this.formatDate(new Date()),
      totalData: 0,
      userName: "",
      // 每页内容数据
      tableData: [],
      //总数据
      tableData1: [],
      handeleTableData: [],
      // 详细信息弹框
      dialogFormVisible: false,
      form: {
        id: 0,
        title: "",
        desc: "",
        tagType: "",
        validDate: "",
        contact: "",
        img: [],
        tags: [],
        allmessages: [], //留言
        authMessage: "",
      },
      formLabelWidth: "100px",
      // 添加信息
      addInfo: false,
      addform: {
        tagType: "danger",
        validDate: this.formatDate(new Date()),
      },
      // 图片
      dialogImageUrl: "",
      dialogVisible: false,
      // 图片列表
      fileList: [],
      loadAllTitle: [
        { value: "一卡通" },
        { value: "计算器" },
        { value: "教科书" },
        { value: "晾衣架" },
        { value: "布偶" },
        { value: "吉他" },
      ],
      loadAllPlace: [
        { value: "图书馆" },
        { value: "一期操场" },
        { value: "令雅食堂" },
        { value: "A10栋" },
        { value: "B12栋" },
        { value: "万达广场" },
      ],
      rules: {
        title: [{ required: true, message: "请输入", trigger: "blur" }],
        validDate: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        desc: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      // 新tag
      dynamicTags: [],
      inputVisible: false,
      inputValue: "",
      userAudit:"",
    };
  },
  created() {
    this.getData();
    this.userName = window.sessionStorage.getItem("userName");
    this.userAudit = window.sessionStorage.getItem("userAudit");
  },
  mounted() {},
  methods: {
    // 获取所有数据
    getData() {
      var that = this;
      axios({
        methods: "GET",
        url: "http://127.0.0.1:3000/mine/all",
        params: {
          InfoPublisher: window.sessionStorage.getItem("userName"), //发布者
        },
      })
        .then((res) => {
          if (res.data.code == 200) {
            console.log(res.data.data, "select");
            that.tableData1 = res.data.data;
          } else {
            console.log("error", res);
          }
        })
        .catch((err) => {
          console.log(err);
        });
      setTimeout(() => {
        axios({
          methods: "GET",
          url: "http://127.0.0.1:3000/mine/handleAll",
          params: {
            leaveUser: window.sessionStorage.getItem("userName"), //发布者
          },
        })
          .then((res) => {
            if (res.data.code == 200) {
              that.handeleTableData = res.data.data;
            } else {
              console.log("error", res);
            }
          })
          .catch((err) => {
            console.log(err);
          });
        if (this.activeName == "first") {
          this.tableData = this.tableData1.slice(0, 12);
          this.totalData = this.tableData1.length;
        } else {
          that.tableData = that.handeleTableData.slice(0, 12);
          that.totalData = that.handeleTableData.length;
        }
      }, 200);
      // setTimeout(() => {
      //   this.tableData = this.tableData1.slice(0, 12);
      //   this.totalData = this.tableData1.length;
      // }, 200);
    },
    handleClick(tab, event) {
      // console.log(tab, event);
      this.search = "";
      this.getData();
    },
    delImg(index) {
      console.log(index);
      this.form.img.splice(index, 1);
      console.log(this.form.img);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      if (this.activeName == "first") {
        this.tableData = this.tableData1.slice(
          (this.currentPage - 1) * 12,
          this.currentPage * 12
        );
      } else {
        this.tableData = this.handeleTableData.slice(
          (this.currentPage - 1) * 12,
          this.currentPage * 12
        );
      }
    },
    // 时间处理
    formatDate(date) {
      var year = date.getFullYear();
      var month = this.format(date.getMonth() + 1);
      var day = this.format(date.getDate());
      var h = this.format(date.getHours());
      var m = this.format(date.getMinutes());
      return year + "-" + month + "-" + day + " " + h + ":" + m;
    },
    format(val) {
      return Number(val) < 10 ? "0" + val : "" + val;
    },
    dateCompare(item) {
      var date1 = new Date(item);
      var date2 = new Date(this.nowData);
      if (date1 > date2) {
        // console.log("有效时间");
        return true;
      } else {
        // console.log("无效时间");
        return false;
      }
    },
    // 弹框
    showDetail(item) {
      var that = this;
      console.log(item);
      if (this.activeName == "first") {
        if (item.barterType == "寻物" || item.barterType == "出物") {
          axios({
            methods: "GET",
            url: "http://127.0.0.1:3000/mine/barter",
            params: {
              infoId: item.barterId,
            },
          })
            .then((res) => {
              if (res.data.code == 200) {
                console.log(res.data.data, "barter");
                that.form.id = res.data.data[0].barterId;
                that.form.title = res.data.data[0].barterTitle;
                that.form.desc = res.data.data[0].barterDesc;
                that.form.tagType = res.data.data[0].barterTagType;
                that.form.validDate = res.data.data[0].barterValidDate;
                that.form.contact = res.data.data[0].barterContent;
                axios({
                  methods: "GET",
                  url: "http://127.0.0.1:3000/barter/barterImg",
                  params: {
                    barterId: item.barterId, //寻物id
                  },
                })
                  .then((res) => {
                    if (res.data.code == 200) {
                      console.log("success", res);
                      console.log(res.data.data, "img");
                      that.form.img = res.data.data;
                    } else {
                      that.form.img = [];
                      console.log("error", res);
                    }
                    that.dialogFormVisible = true;
                  })
                  .catch((err) => {
                    console.log(err);
                  });
                that.form.img = res.data.data[0].barterImg;
                if (typeof res.data.data[0].barterTags == "string") {
                  var chars = res.data.data[0].barterTags.split(",");
                  that.form.tags = chars;
                  that.dynamicTags = chars;
                } else if (that.tableData1[index].barterTags == null) {
                  that.form.tags = ["暂无标签"];
                }
                console.log(that.form, "form");
              } else {
                console.log("error", res);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else if (item.barterType == "留言板") {
          console.log(item, "message");
          that.form.id = item.barterId;
          that.form.title = item.barterTitle;
          that.form.desc = item.barterDesc;
          that.form.img = [];
          that.form.img[0] = item.barterImg;
          that.form.tagType = "留言";
          axios({
            methods: "GET",
            url: "http://127.0.0.1:3000/mine/message",
            params: {
              infoId: item.barterId,
            },
          })
            .then((res) => {
              if (res.data.code == 200) {
                console.log("成功拿到留言内容", res);
                that.form.allmessages = res.data.data;
              } else {
                that.form.allmessages = [];
                console.log("未获取数据", res);
              }
              that.dialogFormVisible = true;
            })
            .catch((err) => {
              console.log("card message", err);
            });
          console.log(that.form);
        } else if (item.barterType == "代取") {
          axios({
            methods: "GET",
            url: "http://127.0.0.1:3000/mine/take",
            params: {
              infoId: item.barterId,
            },
          })
            .then((res) => {
              if (res.data.code == 200) {
                console.log(res.data.data, "take");
                that.form.id = res.data.data[0].takeId;
                that.form.title = res.data.data[0].takeTitle;
                that.form.desc = res.data.data[0].takeDesc;
                // that.form.tagType = res.data.data[0].takeTagType;
                that.form.validDate = res.data.data[0].takeValidDate;
                that.form.contact = res.data.data[0].takeContent;
                axios({
                  methods: "GET",
                  url: "http://127.0.0.1:3000/take/takeImg",
                  params: {
                    takeId: item.barterId, //寻物id
                  },
                })
                  .then((res) => {
                    if (res.data.code == 200) {
                      console.log("success", res);
                      console.log(res.data.data, "img");
                      that.form.img = res.data.data;
                    } else {
                      that.form.img = [];
                      console.log("error", res);
                    }
                    that.dialogFormVisible = true;
                  })
                  .catch((err) => {
                    console.log(err);
                  });
                that.form.img = res.data.data[0].takeImg;
                if (typeof res.data.data[0].takeTags == "string") {
                  var chars = res.data.data[0].takeTags.split(",");
                  that.form.tags = chars;
                  that.dynamicTags = chars;
                } else if (that.tableData1[index].takeTags == null) {
                  that.form.tags = ["暂无标签"];
                }
                // that.fileList.push(that.form.img);
                console.log(that.form, "form");
              } else {
                console.log("error", res);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          console.log(item, "share");
          that.form.id = item.barterId;
          that.form.title = item.barterTitle;
          that.form.desc = item.barterDesc;
          that.form.img = [];
          that.form.img[0] = item.barterImg;
          that.form.tagType = "分享";
          that.dialogFormVisible = true;
          console.log(that.form);
        }
      } else {
        // 处理
        console.log(item, "handle");
        // that.form.audit = item.barterAudit;
        if (item.barterType == "寻物" || item.barterType == "出物") {
          axios({
            methods: "GET",
            url: "http://127.0.0.1:3000/mine/handleBarter",
            params: {
              infoId: item.barterId,
            },
          })
            .then((res) => {
              if (res.data.code == 200) {
                console.log(res.data.data, "handleBarter2");
                that.form.audit = item.barterAudit;
                that.form.InfoPublisher = res.data.data[0].InfoPublisher;
                that.form.authMessage = res.data.data[0].authMessage;
                that.form.id = res.data.data[0].barterId;
                that.form.title = res.data.data[0].barterTitle;
                that.form.desc = res.data.data[0].barterDesc;
                that.form.tagType = res.data.data[0].barterTagType;
                that.form.validDate = res.data.data[0].barterValidDate;
                that.form.contact = res.data.data[0].barterContent;
                axios({
                  methods: "GET",
                  url: "http://127.0.0.1:3000/barter/barterImg",
                  params: {
                    barterId: item.barterId, //寻物id
                  },
                })
                  .then((res) => {
                    if (res.data.code == 200) {
                      console.log("success", res);
                      console.log(res.data.data, "img");
                      that.form.img = res.data.data;
                      axios({
                        methods: "GET",
                        url: "http://127.0.0.1:3000/mine/barterMessages",
                        params: {
                          barterId: item.barterId, //寻物id
                        },
                      })
                        .then((res) => {
                          if (res.data.code == 200) {
                            console.log("success", res);
                            console.log(res.data.data, "img");
                            that.form.leaveMessage = res.data.data;
                          } else {
                            that.form.leaveMessage = res.data.data;
                            console.log("error", res);
                          }
                          that.dialogFormVisible = true;
                        })
                        .catch((err) => {
                          console.log(err);
                        });
                    } else {
                      that.form.img = [];
                      console.log("error", res);
                    }
                    // that.dialogFormVisible = true;
                  })
                  .catch((err) => {
                    console.log(err);
                  });
                // that.form.img = res.data.data[0].barterImg;
                if (typeof res.data.data[0].barterTags == "string") {
                  var chars = res.data.data[0].barterTags.split(",");
                  that.form.tags = chars;
                  that.dynamicTags = chars;
                } else if (that.tableData1[index].barterTags == null) {
                  that.form.tags = ["暂无标签"];
                }
                // that.fileList.push(that.form.img);
                // console.log(that.fileList, "file");
                // that.handleChange(res.data.data[0].barterImg);
                console.log(that.form, "form");

                // that.tableData1 = res.data.data;
              } else {
                console.log("error", res);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          //代取处理
          axios({
            methods: "GET",
            url: "http://127.0.0.1:3000/mine/handleTake",
            params: {
              infoId: item.barterId,
            },
          })
            .then((res) => {
              if (res.data.code == 200) {
                console.log(res.data.data, "handleTake");
                that.form.audit = item.barterAudit;
                that.form.authMessage = res.data.data[0].authMessage;
                that.form.id = res.data.data[0].takeId;
                that.form.title = res.data.data[0].takeTitle;
                that.form.desc = res.data.data[0].takeDesc;
                that.form.tagType = res.data.data[0].takeTagType;
                that.form.validDate = res.data.data[0].takeValidDate;
                that.form.contact = res.data.data[0].takeContent;
                axios({
                  methods: "GET",
                  url: "http://127.0.0.1:3000/take/takeImg",
                  params: {
                    takeId: item.barterId, //寻物id
                  },
                })
                  .then((res) => {
                    if (res.data.code == 200) {
                      console.log("success", res);
                      console.log(res.data.data, "img");
                      that.form.img = res.data.data;
                      axios({
                        methods: "GET",
                        url: "http://127.0.0.1:3000/mine/takeMessages",
                        params: {
                          barterId: item.barterId, //寻物id
                        },
                      })
                        .then((res) => {
                          if (res.data.code == 200) {
                            console.log("success", res);
                            console.log(res.data.data, "takeMessages");
                            that.form.leaveMessage = res.data.data;
                          } else {
                            that.form.leaveMessage = res.data.data;
                            console.log("error", res);
                          }
                          that.dialogFormVisible = true;
                        })
                        .catch((err) => {
                          console.log(err);
                        });
                    } else {
                      that.form.img = [];
                      console.log("error", res);
                    }
                    // that.dialogFormVisible = true;
                  })
                  .catch((err) => {
                    console.log(err);
                  });
                // that.form.img = res.data.data[0].takeImg;
                if (typeof res.data.data[0].takeTags == "string") {
                  var chars = res.data.data[0].takeTags.split(",");
                  that.form.tags = chars;
                  that.dynamicTags = chars;
                } else if (that.tableData1[index].takeTags == null) {
                  that.form.tags = ["暂无标签"];
                }
                // that.fileList.push(that.form.img);
                // console.log(that.fileList, "file");
                // that.handleChange(res.data.data[0].barterImg);
                console.log(that.form, "form");
              } else {
                console.log("error", res);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        }
      }
    },
    // 删除
    del(item) {
      var that = this;
      console.log(item);
      if (item.barterType == "寻物" || item.barterType == "出物") {
        axios({
          methods: "GET",
          url: "http://127.0.0.1:3000/mine/delBarter",
          params: {
            infoId: item.barterId,
          },
        })
          .then((res) => {
            if (res.data.code == 200) {
              this.$message({
                type: "success",
                message: "成功删除",
              });
            } else {
              this.$message.error("删除失败");
            }
            window.location.reload();
          })
          .catch((err) => {
            this.$message.error("删除失败");
          });
      } else if (item.barterType == "留言板") {
        axios({
          methods: "GET",
          url: "http://127.0.0.1:3000/mine/delMessage",
          params: {
            infoId: item.barterId,
          },
        })
          .then((res) => {
            if (res.data.code == 200) {
              this.$message({
                type: "success",
                message: "成功删除",
              });
            } else {
              this.$message.error("删除失败");
            }
            window.location.reload();
          })
          .catch((err) => {
            this.$message.error("删除失败");
          });
      } else if (item.barterType == "代取") {
        axios({
          methods: "GET",
          url: "http://127.0.0.1:3000/mine/delTake",
          params: {
            infoId: item.barterId,
          },
        })
          .then((res) => {
            if (res.data.code == 200) {
              this.$message({
                type: "success",
                message: "成功删除",
              });
            } else {
              this.$message.error("删除失败");
            }
            window.location.reload();
          })
          .catch((err) => {
            this.$message.error("删除失败");
          });
      } else {
        axios({
          methods: "GET",
          url: "http://127.0.0.1:3000/mine/delShare",
          params: {
            infoId: item.barterId,
          },
        })
          .then((res) => {
            if (res.data.code == 200) {
              this.$message({
                type: "success",
                message: "成功删除",
              });
            } else {
              this.$message.error("删除失败");
            }
            window.location.reload();
          })
          .catch((err) => {
            this.$message.error("删除失败");
          });
      }
    },
    // 留言信息
    submitMessage() {
      if (
        this.message == "" ||
        this.message.replace(/(^\s*)|(\s*$)/g, "") == ""
      ) {
        this.$message("要有内容才能留言哦😉");
        return;
      }
      var newMessage = {
        memberName: window.sessionStorage.getItem("userName"),
        content: this.message,
        createTime: this.nowData,
      };
      this.form.allmessages.push(newMessage);
      console.log(this.form);
      axios({
        methods: "GET",
        url: "http://127.0.0.1:3000/message/addMessage",
        params: {
          messageId: this.form.id,
          memberName: window.sessionStorage.getItem("userName"),
          content: this.message,
          createTime: this.nowData,
        },
      })
        .then((res) => {
          console.log(res.data.data);
          this.message = "";
        })
        .catch((err) => {
          console.log("card message", err);
          this.message = "";
        });

      // this.$nextTick(()=>(this.form = data));
      // this.reload();
      // this.form.resetFields()
      // console.log(data,"after");
      //  这里往下写调用后端的代码；
    },
    // 回复信息
    updateAudit(data) {
      console.log(data, "回复");
      if (data.tagType == "danger" || data.tagType == "success") {
        axios({
          methods: "GET",
          url: "http://127.0.0.1:3000/mine/updateAudit",
          params: {
            authMessage: data.authMessage,
            barterId: data.id,
          },
        })
          .then((res) => {
            console.log("success", res);
            window.location.reload();
            this.activeName = "second";
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        axios({
          methods: "GET",
          url: "http://127.0.0.1:3000/mine/updateTakeAudit",
          params: {
            authMessage: data.authMessage,
            barterId: data.id,
          },
        })
          .then((res) => {
            console.log("success", res);
            window.location.reload();
            this.activeName = "second";
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    // 举报
    jubao(data) {
      this.$prompt(
        "请输入举报原因",
        "请如实填写举报，经由管理员审核后会对用户进行信息发布的限制",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputPattern: /^(?=.*?[\u4E00-\u9FA5])/,
          inputErrorMessage: "必须有汉字",
        }
      )
        .then(({ value }) => {
          data.jubao = value;
          this.$message({
            type: "success",
            message: "已收到你的举报信息 ",
          });
          console.log(data);
          this.dialogFormVisible = false;
        })
        .catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消输入'
          // });
        });
    },
    // add
    // 图片
    handleChange(file, fileList) {
      console.log(file, fileList);
      for (let i = 0; i < fileList.length; i++) {
        fetch(fileList[i].url)
          .then((data) => {
            const blob = data.blob();
            console.log(blob);
            return blob;
          })
          .then((blob) => {
            let reader = new window.FileReader();
            reader.onloadend = function () {
              const data = reader.result;
              fileList[i].url = data;
            };
            reader.readAsDataURL(blob);
          });
      }
      var img = [];
      setTimeout(() => {
        for (let index = 0; index < fileList.length; index++) {
          img.push(fileList[index].url);
        }
        console.log(img);
      }, 300);

      this.fileList = img;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      console.log(file);
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    queryTitleSearch(queryString, cb) {
      var restaurants = this.loadAllTitle;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    queryPlaceSearch(queryString, cb) {
      var restaurants = this.loadAllPlace;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    handleSelect(item) {
      console.log(item);
      // this.addTag(item.value);
    },
    hidden() {
      //处理close
      this.addInfo = false;
      (this.addform = {
        tagType: "danger",
        validDate: this.formatDate(new Date()),
      }),
        (this.dynamicTags = []);
      this.inputValue = "";
    },
    // 添加
    add(formName, item) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log("submit!");
          var path = "";
          if (item.tagType == "danger") {
            item.barterType = "寻物";
            path = "addBarter";
          } else if (item.tagType == "success") {
            item.barterType = "出物";
            path = "addBarter";
          } else if (item.tagType == "") {
            item.tagType = "代取";
            path = "addTake";
          } else if (item.tagType == "food" || item.tagType == "camera") {
            // item.tagType = "代取";
            path = "addShare";
          } else if (item.tagType == "message") {
            // item.tagType = "代取";
            path = "addMessage";
          }
          item.tags = this.dynamicTags.join(",");
          item.img = this.fileList;
          if (path == "addBarter") {
            console.log(item, "add");
            var barterId = 0;
            axios
              .post("http://127.0.0.1:3000/barter/" + path, {
                InfoPublisher: window.sessionStorage.getItem("userName"),
                barterAudit: 1,
                barterContent: item.contact,
                barterDesc: item.desc,
                barterImg: item.img[0],
                barterTagType: item.tagType,
                barterTags: item.tags,
                barterTitle: item.title,
                barterType: item.barterType,
                barterValidDate: item.validDate,
                leaveMessageAudit: 0,
              })
              .then((data) => {
                console.log(data.data.data.insertId);
                barterId = data.data.data.insertId;
                console.log(barterId);
              })
              .catch((err) => {
                console.log(err);
                this.$message.error("图片过大，请再次尝试");
              });

            setTimeout(() => {
              console.log(barterId, "barterId");
              axios
                .post("http://127.0.0.1:3000/barter/addBarterImgs", {
                  barterId: barterId,
                  barterImgs: item.img,
                })
                .then((data) => {
                  console.log(data, 1);
                })
                .catch((err) => {
                  console.log(err);
                  this.$message.error("图片过大，请再次尝试");
                });
              window.location.reload();
            }, 1300);
            this.addInfo = false;
          } else if (path == "addTake") {
            console.log("take");
            var takeId = 0;
            axios
              .post("http://127.0.0.1:3000/take/addTake", {
                InfoPublisher: window.sessionStorage.getItem("userName"),
                takeAudit: 1,
                takeContent: item.contact,
                takeDesc: item.desc,
                takeImg: item.img[0],
                // takeTagType: item.tagType,
                takeTags: item.tags,
                takeTitle: item.title,
                takeType: "代取",
                takeValidDate: item.validDate,
                leaveMessageAudit: 0,
              })
              .then((data) => {
                takeId = data.data.data.insertId;
                console.log(takeId);
              })
              .catch((err) => {
                console.log(err);
                this.$message.error("图片过大，请再次尝试");
              });

            setTimeout(() => {
              console.log(takeId, "takeId");
              axios
                .post("http://127.0.0.1:3000/take/addTakeImgs", {
                  takeId: takeId,
                  takeImgs: item.img,
                })
                .then((data) => {
                  console.log(data, 1);
                })
                .catch((err) => {
                  console.log(err);
                  this.$message.error("图片过大，请再次尝试");
                });
              window.location.reload();
            }, 1300);
            this.addInfo = false;
          } else if (path == "addShare") {
            axios
              .post("http://127.0.0.1:3000/share/addShare", {
                InfoPublisher: window.sessionStorage.getItem("userName"),
                shareDesc: item.desc,
                shareImg: item.img[0],
                shareTitle: item.title,
                shareType: item.tagType,
              })
              .then((data) => {
                console.log(data);
              })
              .catch((err) => {
                console.log(err);
                this.$message.error("图片过大，请再次尝试");
              });
            this.addInfo = false;
          } else {
            axios
              .post("http://127.0.0.1:3000/message/addMessage", {
                InfoPublisher: window.sessionStorage.getItem("userName"),
                messageDesc: item.desc,
                messageImg: item.img[0],
                messageTitle: item.title,
              })
              .then((data) => {
                //  barterId = data.data.data.insertId;
                console.log(data);
                window.location.reload();
              })
              .catch((err) => {
                console.log(err);
                this.$message.error("图片过大，请再次尝试");
              });
            this.addInfo = false;
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 修改
    updateadd(formName, item) {
      console.log(item, "update");
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log("submit!");
          item.tags = this.dynamicTags.join(",");
          console.log(item, "updateafter");
          if (item.tagType == "danger" || item.tagType == "success") {
            for (let index = 0; index < item.img.length; index++) {
              this.fileList.push(item.img[index].barterImg);
            }
            item.img = this.fileList;

            axios
              .post("http://127.0.0.1:3000/mine/updateBarter", {
                infoId: item.id,
                infoContent: item.contact,
                infoDesc: item.desc,
                infoImg: item.img[0],
                infoTags: item.tags,
                infoTitle: item.title,
                infoValidDate: item.validDate,
              })
              .then((res) => {
                console.log(res.data.data);
                this.dialogFormVisible = false;
                axios
                  .post("http://127.0.0.1:3000/mine/delBarterImg", {
                    infoId: item.id,
                  })
                  .then((res) => {
                    console.log(res, "del");
                  })
                  .catch((err) => {
                    console.log(err);
                    this.$message.error("图片过大，请再次尝试");
                  });
              })
              .catch((err) => {
                console.log(err);
              });
            setTimeout(() => {
              axios
                .post("http://127.0.0.1:3000/mine/updateBarterImgs", {
                  infoId: item.id,
                  infoImgs: item.img,
                })
                .then((data) => {
                  console.log(data, 1);
                })
                .catch((err) => {
                  console.log(err);
                  this.$message.error("图片过大，请再次尝试");
                });
              window.location.reload();
            }, 1300);
          } else if (item.tagType == "") {
            for (let index = 0; index < item.img.length; index++) {
              this.fileList.push(item.img[index].takeImg);
            }
            item.img = this.fileList;

            axios
              .post("http://127.0.0.1:3000/mine/updateTake", {
                infoId: item.id,
                infoContent: item.contact,
                infoDesc: item.desc,
                infoImg: item.img[0],
                infoTags: item.tags,
                infoTitle: item.title,
                infoValidDate: item.validDate,
              })
              .then((res) => {
                console.log(res.data.data);
                this.dialogFormVisible = false;
                axios
                  .post("http://127.0.0.1:3000/mine/delTakeImg", {
                    infoId: item.id,
                  })
                  .then((res) => {
                    console.log(res, "del");
                  })
                  .catch((err) => {
                    console.log(err);
                  });
              })
              .catch((err) => {
                console.log(err);
              });
            setTimeout(() => {
              axios
                .post("http://127.0.0.1:3000/mine/updateTakeImgs", {
                  infoId: item.id,
                  infoImgs: item.img,
                })
                .then((data) => {
                  console.log(data, 1);
                })
                .catch((err) => {
                  console.log(err);
                  this.$message.error("图片过大，请再次尝试");
                });
              window.location.reload();
            }, 1300);
          } else if (item.tagType == "留言") {
            axios
              .post("http://127.0.0.1:3000/mine/updateMessage", {
                infoId: item.id,
                infoDesc: item.desc,
                infoImg: item.img[0],
                infoTitle: item.title,
              })
              .then((res) => {
                console.log(res.data.data);
                this.dialogFormVisible = false;
                window.location.reload();
              })
              .catch((err) => {
                console.log(err);
                this.$message.error("图片过大，请再次尝试");
              });
          } else {
            console.log("message");
            axios
              .post("http://127.0.0.1:3000/mine/updateShare", {
                infoId: item.id,
                infoDesc: item.desc,
                infoImg: item.img[0],
                infoTitle: item.title,
              })
              .then((res) => {
                console.log(res.data.data);
                this.dialogFormVisible = false;
                window.location.reload();
              })
              .catch((err) => {
                console.log(err);
                this.$message.error("图片过大，请再次尝试");
              });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 新tag
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    addTag(value) {
      console.log(value);
      let inputValue = value;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    // 搜索前端实现
    searchData(data) {
      if (this.activeName == "first") {
        let list = this.tableData1.filter((item, index) =>
          item.barterTitle.includes(data)
        );
        this.tableData = list.slice(0, 12);
        this.totalData = list.length;
      } else {
        console.log(this.handeleTableData);
        let list = this.handeleTableData.filter((item, index) =>
          item.barterTitle.includes(data)
        );
        console.log(list);
        this.tableData = list.slice(0, 12);
        this.totalData = list.length;
      }
    },
  },
};
</script>
<style scoped lang="css">
.el-tabs__item {
  font-size: 15px !important;
  font-weight: bold !important;
}
.el-tabs__item.is-active {
  color: #ec1449 !important;
}
.el-tabs__active-bar {
  background-color: #ec1449 !important;
}
/* .el-tabs .el-tabs__item .is-top, .is-active {
    color: #EC1449;
} */
/* 待修改 */
.desc {
  overflow-y: hidden;
  height: 85px;
  font-size: 13px;
  color: #999;
  width: 100%;
  border: none;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  resize: none;
}
.time {
  display: block;
  padding-bottom: 5px;
  font-size: 15px;
  color: #999;
}
.bottom {
  margin-top: 8px;
  line-height: 12px;
}

.button {
  padding: 0;
  position: absolute;
  right: 7px;
  bottom: 8px;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
.tags {
  margin-top: 8px;
}
.tags .el-tag {
  margin: 3px;
}
.el-card {
  height: 337px;
  position: relative;
}
.pages {
  position: fixed;
  bottom: 10px;
  right: 10px;
}
/* 新tag */
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
/* 举报样式 */
.el-message-box__title {
  color: red !important;
  font-size: 9px !important;
}
</style>